<template>
  <div class="table-page flex-col">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item field="keyword" hide-label :show-colon="true">
        <a-input
          class="w-60n"
          placeholder="请输入关键字检索"
          v-model="listParams.keyword"
          @press-enter="changeCurrent(1)"
        ></a-input>
      </a-form-item>
      <a-form-item field="accountId" label="所属账号" :show-colon="true">
        <a-select placeholder="请选择账号检索" class="w-50n" v-model="listParams.accountId" @change="changeCurrent(1)">
          <a-option value=""> 全部 </a-option>
          <a-option v-for="item in accountData" :key="item.id" :value="item.id">
            {{ item.remark }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="w-full flex-1 m-relative">
      <div class="m-absolute t-0 b-20 l-0 r-0">
        <a-table
          row-key="id"
          v-model:columns="columns"
          :loading="loading"
          :data="tableData"
          :pagination="pagination"
          :scroll="{ x: '100%', y: '100%', minWidth: 800 }"
          @refresh="getTableData"
          :expandable="expandable"
          @expand="expndChange"
          ref="siteRef"
        >
          <template #custom-extra> </template>
          <template #name="{ record }">
            <span class="text-success cursor-pointer" @click="expndChange(record.id)"> {{ record.name }}</span>
          </template>
          <template #status="{ record }">
            <div class="flex flex-j-c">
              <GiDot
                :type="record.status == 1 ? 'success' : 'info'"
                :text="record.status == 1 ? '运行中' : '已停止'"
                :animation="false"
              />
            </div>
          </template>
          <template #domainNum="{ record }">
            <a-button status="success" type="text" @click="expndChange(record.id)"> {{ record.domainNum }}</a-button>
          </template>
          <template #accountRemark="{ record }">
            <span class="text-theme"> {{ record.account.remark }}</span>
          </template>
          <template #ssl="{ record }">
            <a-button status="success" type="text" v-if="record?.ssl?.days > 0"> 剩余{{ record.ssl.days }}天</a-button>
            <a-button status="danger" type="text" v-else>已到期</a-button>
          </template>
          <template #expireTime="{ record }">
            <div class="flex flex-j-c">
              <a-button v-if="!record.ssl" status="success" type="text" style="color: #f0ad4e"> 未部署</a-button>
              <a-button status="success" type="text"> {{ record.ssl.expireTime }}</a-button>
            </div>
          </template>
          <template #action="{ record }">
            <a-button type="text" size="small" @click="onSy(record.id)"> 同步 </a-button>
            <a-button type="text" size="small" @click="onSign(record)"> 证书签发 </a-button>
            <a-button type="text" size="small" @click="onRemark(record)"> 设置备注 </a-button>
          </template>
        </a-table>
      </div>
    </div>
    <EditDrawer ref="EditDrawerRef" @getTableData="getTableData" :cateList="cateList"></EditDrawer>
    <Sign ref="SignRef" @getTableData="getTableData"></Sign>
  </div>
</template>
<script setup>
import { siteList, syncSiteInfo, accountList } from '@/apis'
import { usePagination } from '@/hooks'
import EditDrawer from './EditDrawer.vue'
import { deleteEmpty } from '@/utils/common'
import Sign from './Sign.vue'
import DomainList from './DomainList.vue'
import { Message, Modal } from '@arco-design/web-vue'
import { h } from 'vue'
defineOptions({ name: 'domain' })
const tableData = ref([])
const loading = ref(false)
const EditDrawerRef = ref()
const cateList = ref([])
const selectedKeys = ref([])
const accountData = ref([])
const siteRef = ref()
const SignRef = ref()
const currentE = ref()
const listParams = reactive({
  page: 1,
  size: 15,
  keyword: undefined,
  accountId: undefined
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })
const columns = ref([
  {
    title: '网站名',
    width: 200,
    slotName: 'name'
  },
  {
    title: '所属账号',
    width: 100,
    slotName: 'accountRemark'
  },
  {
    title: '状态',
    width: 100,
    slotName: 'status',
    align: 'center'
  },
  {
    title: '域名',
    width: 80,
    slotName: 'domainNum',
    align: 'center'
  },
  {
    title: '到期时间',
    width: 180,
    slotName: 'expireTime',
    align: 'center'
  },
  {
    title: 'ssl证书',
    width: 180,
    slotName: 'ssl',
    align: 'center'
  },
  {
    title: '宝塔备注',
    width: 130,
    dataIndex: 'ps',
    align: 'center',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '备注',
    width: 100,
    dataIndex: 'remark',
    align: 'center'
  },
  {
    title: '操作',
    slotName: 'action',
    width: 180,
    align: 'center'
  }
])

const getAccountData = async () => {
  try {
    loading.value = true
    const res = await accountList({ page: 1, size: 30 })
    accountData.value = res.data.data
  } finally {
    loading.value = false
  }
}

const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await siteList(deleteEmpty({ ...listParams }))
    tableData.value = res.data.data
    setTotal(res?.data?.total)
  } finally {
    loading.value = false
  }
}
getTableData()
getAccountData()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

const onResetSearch = () => {
  listParams.keyword = listParams.accountId = undefined
  changeCurrent(1)
}

// 设置备注
const onRemark = (item) => {
  EditDrawerRef.value?.addOrEdit(item)
}

// 签证
const onSign = (item) => {
  SignRef.value?.addOrEdit(item)
}

// 删除
const onSy = (id) => {
  Modal.warning({
    title: '提示',
    content: '是否确认同步改站点信息？',
    hideCancel: false,
    onOk: () => {
      loading.value = true
      const ids = id ? [id] : selectedKeys.value
      const apiArr = ids.map((item) => {
        return syncSiteInfo({ id: item })
      })
      Promise.all(apiArr)
        .then(() => {
          selectedKeys.value = []
          Message.success('操作成功')
          getTableData()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

// 展开行
const expandable = reactive({
  title: '',
  width: 30,
  defaultExpandedRowKeys: [],
  defaultExpandAllRows: false,
  expandedRowRender: (record) => {
    return h(DomainList, {
      domains: record.domains
    })
  }
})

// 展开行手风琴
const expndChange = (e) => {
  if (currentE.value) {
    if (currentE.value == e) {
      siteRef.value.expand(e, false)
      currentE.value = undefined
    } else {
      siteRef.value.expand(currentE.value, false)
      siteRef.value.expand(e, true)
      currentE.value = e
    }
  } else {
    siteRef.value.expand(e, true)
    currentE.value = e
  }
}
</script>
<style lang="scss" scoped>
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table2 {
  height: 100%;
  overflow: hidden;
  // margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
.text-success {
  color: rgb(var(--success-6));
}
</style>
